<template>
  <div class="app-container jklis">
    <div class="zdy-main">
      <!-- <el-tabs
        type="border-card"
        v-model="actived"
        @tab-click="tabChange"
        v-loading="loading"
      > -->
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="100px"
        @keyup.enter.native="search"
      >
        <el-form-item label="编号" prop="num">
          <el-input
            v-model="queryParams.num"
            placeholder="请输入编号"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="卡位类型" prop="category">
          <el-select
            v-model="queryParams.category"
            placeholder="请选择卡位类型"
          >
            <el-option
              v-for="(dict, index) in phonecategoryList"
              :key="index"
              :label="dict.remark"
              :value="dict.remark"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="手机号" prop="tel">
          <el-input
            v-model="queryParams.tel"
            placeholder="请输入手机号"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="部门" prop="type">
          <!-- <el-select v-model="queryParams.type" placeholder="请选择部门">
            <el-option
              v-for="dict in typeListArr"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictLabel"
            />
          </el-select> -->
          <treeselectNew
            style="width: 220px"
            v-model="queryParams.deptId"
            :options="deptOptions"
            placeholder="请选择归属部门"
          >
          </treeselectNew>
        </el-form-item>
        <el-form-item label="使用状态" prop="type">
          <el-select v-model="queryParams.useType" placeholder="请选择使用状态">
            <el-option
              v-for="dict in AccountList"
              :key="dict.id"
              :label="dict.type"
              :value="dict.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="运营商" prop="type">
          <el-select v-model="queryParams.carrier" placeholder="请选择运营商">
            <el-option
              v-for="dict in carrierList"
              :key="dict.id"
              :label="dict.name"
              :value="dict.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="实名归属" prop="type">
          <el-select
            v-model="queryParams.custodianType"
            placeholder="请选择实名归属"
          >
            <el-option
              v-for="dict in shimingList"
              :key="dict.id"
              :label="dict.name"
              :value="dict.name"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="游戏类型">
          <el-select
            v-model="queryParams.gameType"
            placeholder="请选择游戏类型"
          >
            <el-option
              v-for="item in gameList"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="search"
            class="zdy-btn"
            >搜索</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            icon="el-icon-refresh"
            type="primary"
            size="mini"
            plain
            @click="resetQuery"
            class="zdy-btn zdy-btn-refresh"
            >重置</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="openAdd"
            class="zdy-btn"
            >新增</el-button
          >
          <el-button
            type="info"
            plain
            icon="el-icon-upload2"
            size="mini"
            @click="handleImport"
            >导入</el-button
          >
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            :loading="exportLoading"
            @click="handleExport"
            >导出</el-button
          >
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            :loading="exportLoading"
            @click="handleExportNew"
            >导出模板</el-button
          >
        </el-form-item>
      </el-form>
      <!-- <el-tab-pane
          :label="tab"
          :name="tab"
          v-for="tab in gameTypes"
          :key="tab"
        > -->
      <el-table
        :data="tableData.records"
        @cell-dblclick="showImage"
        height="calc(100vh - 310px)"
        style="width: 100%"
        :border="true"
      >
        <!-- <el-table-column prop="id" label="序号" width="80"></el-table-column> -->
        <el-table-column
          prop="id"
          label="编号"
          width="88"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="category"
          label="卡位类型"
          width="88"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="deptName"
          label="使用部门"
          width="112"
          align="center"
        >
          <template #default="{ row }">
            <el-button
              style="
                background-color: #e6f0ff;
                color: #2b86ff;
                border: 1px solid #2b86ff;
              "
              disabled
              type=""
              size="mini"
              plain
              >{{ row.deptName }}</el-button
            >
          </template></el-table-column
        >
        <el-table-column
          prop="custodian"
          label="保管人"
          width="88"
          align="center"
        ></el-table-column>
        <el-table-column prop="tel" label="手机号" width="160" align="center">
          <template #default="{ row }">
            <el-button
              style="
                background-color: #e6f0ff;
                color: #2b86ff;
                border: 1px solid #2b86ff;
              "
              type=""
              size="mini"
              @click="telhistory(row)"
              >{{ row.tel }}
            </el-button>
          </template></el-table-column
        >

        <el-table-column
          prop="num"
          label="所在设备"
          width="160"
          align="center"
        ></el-table-column>
        <el-table-column label="QQ" width="160" align="center">
          <template #default="{ row }">
            <div
              style="
                width: 50px;
                height: 26px;
                line-height: 26px;
                text-align: center;
                background-color: #fef0f0;
                border-radius: 5px;
                margin: 0 auto;
                border: 1px solid #f593a8;
                color: #f593a8;
                cursor: pointer;
              "
              v-if="row.bindData.qq"
              @click="ViewBindingInformation(row.bindData.qq)"
            >
              {{ row.bindData.qq.count ? row.bindData.qq.count : 0 }} / 5
            </div>
            <div
              v-else
              style="
                width: 50px;
                height: 26px;
                line-height: 26px;
                text-align: center;
                background-color: #e6f0ff;
                border-radius: 5px;
                margin: 0 auto;
                border: 1px solid #2b86ff;
                color: #2b86ff;
                cursor: pointer;
              "
              @click="ViewBindingInformation(row.bindData.qq)"
            >
              0 / 5
            </div>
          </template>
        </el-table-column>
        <el-table-column label="微信" width="160" align="center">
          <template #default="{ row }">
            <div
              style="
                width: 50px;
                height: 26px;
                line-height: 26px;
                text-align: center;
                background-color: #fef0f0;
                border-radius: 5px;
                margin: 0 auto;
                border: 1px solid #f593a8;
                color: #f593a8;
                cursor: pointer;
              "
              @click="ViewBindingInformation(row.bindData.wx)"
              v-if="row.bindData.wx"
            >
              {{ row.bindData.wx.count ? row.bindData.wx.count : 0 }} / 1
            </div>
            <div
              v-else
              style="
                width: 50px;
                height: 26px;
                line-height: 26px;
                text-align: center;
                background-color: #e6f0ff;
                border-radius: 5px;
                margin: 0 auto;
                border: 1px solid #2b86ff;
                color: #2b86ff;
                cursor: pointer;
              "
              @click="ViewBindingInformation(row.bindData.wx)"
            >
              0 / 1
            </div>
          </template>
        </el-table-column>
        <el-table-column label="使用状态" width="160" align="center">
          <template #default="{ row }">
            <div v-if="row.useType == 0">正常</div>
            <div v-if="row.useType == 1">已使用</div>
            <div v-if="row.useType == 2">已频繁</div>
            <div v-if="row.useType == 3">停机</div>
            <div v-if="row.useType == 4">超限</div>
            <div v-if="row.useType == 5">风险</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="carrier"
          label="运营商"
          width="160"
          align="center"
        >
          <template #default="{ row }">
            <el-button
              style="
                background-color: #e6f0ff;
                color: #2b86ff;
                border: 1px solid #2b86ff;
              "
              disabled
              type=""
              size="mini"
              plain
              >{{ row.carrier }}</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="custodianType"
          label="实名归属"
          width="160"
          align="center"
        >
          <template #default="{ row }">
            <el-button
              type=""
              style="
                background-color: #e6f0ff;
                color: #2b86ff;
                border: 1px solid #2b86ff;
              "
              disabled
              size="mini"
              plain
              >{{ row.custodianType }}</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="tel" label="图片" width="160" align="center">
          <template #default="{ row }">
            <div style="margin: 0 auto" v-if="row.useImg">
              <!-- <img style="width: 66px; height: 66px" :src="row.useImg" alt="" /> -->
              <el-image
                style="width: 66px; height: 66px"
                :src="row.useImg"
                :preview-src-list="[row.useImg]"
              >
              </el-image>
            </div>
          </template>
        </el-table-column>

        <!-- <el-table-column
          prop="num"
          label="卡位编码"
          width="88"
          align="center"
        ></el-table-column> -->
        <el-table-column
          prop="remark"
          label="备注"
          min-width="260"
          align="center"
        >
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              :content="scope.row.remark"
              placement="top-start"
            >
              <div class="zdy-des">{{ scope.row.remark }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="createName"
          label="发布人"
          width="120"
          align="center"
        ></el-table-column>
        <el-table-column label="库洛" width="160" align="center">
          <template #default="{ row }">
            <div
              style="
                width: 50px;
                height: 26px;
                line-height: 26px;
                text-align: center;
                background-color: #fef0f0;
                border-radius: 5px;
                margin: 0 auto;
                border: 1px solid #f593a8;
                color: #f593a8;
                cursor: pointer;
              "
              v-if="row.bindData.kl"
              @click="ViewBindingInformation(row.bindData.kl)"
            >
              {{ row.bindData.kl.count ? row.bindData.kl.count : 0 }} / 1
            </div>
            <div
              v-else
              style="
                width: 50px;
                height: 26px;
                line-height: 26px;
                text-align: center;
                background-color: #e6f0ff;
                border-radius: 5px;
                margin: 0 auto;
                border: 1px solid #2b86ff;
                color: #2b86ff;
                cursor: pointer;
              "
              @click="ViewBindingInformation(row.bindData.kl)"
            >
              0 / 1
            </div>
          </template>
        </el-table-column>
        <el-table-column label="米哈游" width="160" align="center">
          <template #default="{ row }">
            <div
              style="
                width: 50px;
                height: 26px;
                line-height: 26px;
                text-align: center;
                background-color: #fef0f0;
                border-radius: 5px;
                margin: 0 auto;
                border: 1px solid #f593a8;
                color: #f593a8;
                cursor: pointer;
              "
              v-if="row.bindData.mhy"
              @click="ViewBindingInformation(row.bindData.mhy)"
            >
              {{ row.bindData.mhy.count ? row.bindData.mhy.count : 0 }} / 1
            </div>
            <div
              v-else
              style="
                width: 50px;
                height: 26px;
                line-height: 26px;
                text-align: center;
                background-color: #e6f0ff;
                border-radius: 5px;
                margin: 0 auto;
                border: 1px solid #2b86ff;
                color: #2b86ff;
                cursor: pointer;
              "
              @click="ViewBindingInformation(row.bindData.mhy)"
            >
              0 / 1
            </div>
          </template>
        </el-table-column>
        <el-table-column label="网易" width="160" align="center">
          <template #default="{ row }">
            <div
              style="
                width: 50px;
                height: 26px;
                line-height: 26px;
                text-align: center;
                background-color: #fef0f0;
                border-radius: 5px;
                margin: 0 auto;
                border: 1px solid #f593a8;
                color: #f593a8;
                cursor: pointer;
              "
              @click="ViewBindingInformation(row.bindData.wy)"
              v-if="row.bindData.wy"
            >
              {{ row.bindData.wy.count ? row.bindData.wy.count : 0 }} / 1
            </div>
            <div
              v-else
              style="
                width: 50px;
                height: 26px;
                line-height: 26px;
                text-align: center;
                background-color: #e6f0ff;
                border-radius: 5px;
                margin: 0 auto;
                border: 1px solid #2b86ff;
                color: #2b86ff;
                cursor: pointer;
              "
              @click="ViewBindingInformation(row.bindData.wy)"
            >
              0 / 1
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="160"
          align="center"
        ></el-table-column>

        <!-- <el-table-column
          prop="gameType"
          label="游戏类型"
          width="120"
          align="center"
        ></el-table-column> -->

        <el-table-column fixed="right" label="操作" width="168">
          <template slot-scope="scope">
            <el-button
              v-hasPermi="['authority:system:edit']"
              type="text"
              size="mini"
              @click="editRow(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              v-hasPermi="['authority:system:edit']"
              @click="delfn(scope.row)"
              size="mini"
              style="color: red"
              >删除</el-button
            >

            <el-button
              type="text"
              v-hasPermi="['authority:system:edit']"
              size="mini"
              @click="isUse(scope.row)"
              v-if="isUsePrew"
              >确认使用</el-button
            >

            <el-button
              type="text"
              v-hasPermi="['authority:system:edit']"
              v-if="scope.row.gameType == '网易' && scope.row.wyStatus == 2"
              @click="zhuanweishiyong(scope.row)"
              size="mini"
              style="color: red"
              >转未使用</el-button
            >

            <el-button
              v-hasPermi="['authority:system:edit']"
              v-if="scope.row.category"
              type="text"
              size="mini"
              @click="fasong(scope.row)"
              >发送短信</el-button
            >

            <el-button
              v-hasPermi="['authority:system:edit']"
              type="text"
              size="mini"
              @click="SMSLog(scope.row)"
              >短信日志</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- </el-tab-pane>
      </el-tabs> -->
    </div>
    <div class="pages-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum"
        :page-sizes="[10, 20, 30, 40, 50, 60]"
        :page-size="queryParams.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="tableData.total"
      ></el-pagination>
    </div>
    <addDialog ref="addDialog"></addDialog>
    <!-- 系列弹窗 -->
    <el-dialog
      class="diologs"
      append-to-body
      :title="names"
      :visible.sync="dialogVisiblese"
      width="30%"
      center
      top="30vh"
    >
      <div
        style="
          height: 600px;
          display: flex;
          justify-content: start;
          overflow: auto;
        "
      >
        <div class="boxs">
          <div
            class="ones"
            v-for="(item, index) in xilie"
            :key="index"
            @click="getOnes(item.list, item.name)"
          >
            <div>{{ item.name }}({{ item.list.length }}个)</div>
          </div>
        </div>
        <div class="two" style="">
          <div class="twos" style="color: #1abc9c">
            {{ nameyouxi + " - 账号信息" }}
          </div>
          <div class="twos" v-for="(item1, index1) in listOne" :key="index1">
            {{ item1 }}
          </div>
        </div>
      </div>
    </el-dialog>

    <el-dialog
      title="确认使用"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="formData" label-width="80px">
        <el-form-item label="使用类型">
          <el-select
            v-model="formData.useType"
            placeholder="请选择"
            @change="changeUseType"
          >
            <el-option
              v-for="item in AccountList"
              :key="item.id"
              :label="item.type"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="绑定QQ" v-if="ObjType.isBindAccount == '1'">
          <el-input
            v-model="formData.bindAccount"
            placeholder="请输入绑定QQ"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="使用失效">
          <el-select v-model="formData.useTime" placeholder="请选择">
            <el-option
              v-for="item in timeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          天
        </el-form-item> -->
        <el-form-item label="截图" v-if="ObjType.isUseImg == '1'">
          <el-upload
            class="avatar-uploader"
            :action="uploadImgUrl"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="useImg" :src="useImg" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="备注">
          <el-input
            type="textarea"
            v-model="formData.useRemark"
            placeholder="请输入备注"
          ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="updateTel()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 查看绑定信息 -->
    <el-dialog
      title="绑定记录"
      :visible.sync="dialogVisiblecheckdata"
      width="50%"
      @close="dialogVisiblecheckdata = false"
    >
      <el-table :data="checkListAll" border style="width: 100%">
        <el-table-column prop="key" label="游戏名称" align="center">
        </el-table-column>
        <el-table-column prop="value" label="账号信息" align="center">
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 用户导入对话框 -->
    <el-dialog
      :title="upload.title"
      :visible.sync="upload.open"
      width="400px"
      append-to-body
    >
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip text-center" slot="tip">
          <!-- <div class="el-upload__tip" slot="tip">
            <el-checkbox
              v-model="upload.updateSupport"
            />是否更新已经存在的用户数据
          </div> -->
          <span>仅允许导入xls、xlsx格式文件。</span>
          <!-- <el-link
            type="primary"
            :underline="false"
            style="font-size: 12px; vertical-align: baseline"
            @click="importTemplate"
            >下载模板</el-link
          > -->
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 发送短信 -->
    <el-dialog
      title="发送短信"
      :visible.sync="dialogVisiblesePhone"
      @close="onClose"
      width="500"
    >
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rulesPhone"
        size="medium"
        label-width="120px"
      >
        <el-form-item label="发送方手机号" prop="n">
          <el-input
            v-model="formData.n"
            placeholder="请输入发送方手机号"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="运营商" prop="n">
          <el-select
            v-model="formData.carrier"
            placeholder="请选择卡位类型"
            @change="changeCarrier"
            style="width: 366px"
          >
            <el-option
              v-for="(dict, index) in gameTypeList"
              :key="index"
              :label="dict.name"
              :value="dict.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="接收号码" prop="to">
          <el-select
            style="width: 366px"
            v-model="formData.to"
            placeholder="请先选择运营商"
          >
            <el-option
              v-for="(dict, index) in gameTypePhoneList"
              :key="index"
              :label="dict.number + '(' + dict.remark + ')'"
              :value="dict.number"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="接收方手机号" prop="to">
          <el-input
            v-model="formData.to"
            placeholder="请输入接收方手机号"
          ></el-input>
        </el-form-item> -->
        <el-form-item label="发送内容" prop=" txt">
          <el-input
            type="textarea"
            v-model="formData.txt"
            placeholder="请输入发送内容"
            style="width: 500px"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="onClose">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>

    <!-- 短信日志 -->
    <el-dialog
      title="发送短信"
      :visible.sync="dialogVisibleseMessage"
      @close="onCloseMessage"
      width="70%"
    >
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rulesPhone"
        size="medium"
        label-width="100px"
      >
        <el-form-item label="短信类型">
          <el-select
            v-model="messageObj.type"
            placeholder="请选择短信类型"
            @change="changeTypeDetail"
          >
            <el-option
              v-for="item in messageType"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div>
        <el-table :data="messageList" border style="width: 100%">
          <el-table-column
            prop="to"
            width="166"
            label="接收方手机号"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="n"
            width="166"
            label="发送方手机号"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="txt"
            width="266"
            label="短信内容"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="result" label="结果" align="center">
          </el-table-column>
          <el-table-column
            prop="createTime"
            width="186"
            label="创建时间"
            align="center"
          >
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer">
        <el-button @click="onCloseMessage">取消</el-button>
      </div>
    </el-dialog>

    <!-- 操作记录 -->
    <el-dialog
      title="操作记录"
      :visible.sync="dialogVisibleseMessage1"
      @close="onClosehistory"
      width="50%"
    >
      <div>
        <el-table :data="telManageHistoryList" border style="width: 100%">
          <el-table-column
            prop="operator"
            width="166"
            label="操作人"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="status"
            width="166"
            label="操作类型"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="createTime"
            width="186"
            label="操作时间"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="reason"
            width="300"
            label="备注"
            align="center"
          >
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer">
        <el-button @click="onClosehistory">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import addDialog from "./components/addn";
import phoneApi from "../../api/phoneManage/indexn";
import gameListApi from "@/api/gameConfig/gameList";
import { getDicts } from "@/api/system/dict/data";
import { getToken } from "@/utils/auth";
import { treeselect } from "@/api/system/dept";
import treeselectNew from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { listTeluseConfig } from "@/api/teluseConfig";
import { listHistory } from "@/api/history/history";
import moment from "moment";
export default {
  name: "phoneManage",
  components: { addDialog, treeselectNew },
  data() {
    return {
      gameList: [],
      uploadImgUrl: "",
      dialogVisible: false,
      saleTimeArr: [],
      useImg: null,
      srcList: [],
      isUsePrew: true,
      toUsePrew: false,
      showQQ: false,
      showJietu: false,
      formData: {},
      typeList: [
        {
          value: "1",
          label: "已使用",
        },
        {
          value: "2",
          label: "已频繁",
        },
      ],
      typeListArr: [],
      timeList: [
        {
          value: "7",
          label: "7",
        },
        {
          value: "15",
          label: "15",
        },
        {
          value: "30",
          label: "30",
        },
      ],
      formData: {},
      isUsePrew: true,
      gameTypes: ["手机", "手机卡"],
      tableData: {
        records: [],
        total: 0,
      },
      actived: "手机",
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        wyStatus: null,
        gameType: null,
        startTime: null,
        endTime: null,
        createName: null,
        deptId: undefined,
      },
      dialogVisiblese: false,
      listOne: [],
      nameyouxi: "",
      names: "",
      xilie: [],
      gameType: [
        { name: "腾讯", id: 1 },
        { name: "网易", id: 2 },
        { name: "米哈游", id: 3 },
        { name: "其他", id: 4 },
      ],
      gameStatus: [
        { name: "未使用", id: 1 },
        { name: "已空闲", id: 2 },
        { name: "使用中", id: 3 },
        { name: "已售未换绑", id: 4 },
      ],
      exportLoading: false,
      saleTimeArr: [],
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/telManage/importData",
      },
      carrierList: [
        { name: "电信", id: 1 },
        { name: "联通", id: 2 },
        { name: "移动", id: 3 },
        { name: "广电", id: 4 },
      ],
      shimingList: [
        { name: "企业卡", id: 1 },
        { name: "公司卡", id: 2 },
        { name: "个人卡", id: 3 },
      ],
      checkList: [
        // { name: "正常", id: 0 },
        { name: "已使用", id: 1 },
        { name: "已频繁", id: 2 },
        { name: "停机", id: 3 },
        { name: "超限", id: 4 },
        { name: "风险", id: 5 },
      ],
      checkListAll: [],
      dialogVisiblecheckdata: false,
      deptOptions: [],
      dialogVisiblesePhone: false,
      rulesPhone: {
        n: [
          {
            required: true,
            message: "请输入发送方手机号",
            trigger: "blur",
          },
        ],
        to: [
          {
            required: true,
            message: "请输入接收方手机号",
            trigger: "blur",
          },
        ],
        txt: [
          {
            required: true,
            message: "请输入发送内容",
            trigger: "blur",
          },
          {
            pattern: /^1(3|4|5|7|8|9)\d{9}$/,
            message: "手机号格式错误",
            trigger: "blur",
          },
        ],
      },
      formData: {
        n: null,
        to: null,
        txt: "",
        carrier: null,
        category: null,
      },
      AccountList: [],
      ObjType: {},
      dialogVisibleseMessage: false,
      dialogVisibleseMessage1: false,
      messageType: [
        { name: "发送方", id: 1 },
        { name: "接收方", id: 2 },
      ],
      messageObj: {
        id: null,
        type: null,
        n: null,
        to: null,
      },
      telHistory: {
        telId: null,
      },
      messageList: [],
      messageData: {},
      telManageHistoryList: [],
      phonecategoryList: [],
      gameTypeList: [],
      gameTypePhoneList: [],
    };
  },
  created() {
    // this.getGames();
    // this.getHost();
    this.getList();
    this.uploadImgUrl = process.env.VUE_APP_BASE_API + "/upload/image";
    this.getGameList();
    this.getTypeList();
    this.getTreeselect();
    this.getaccountType();
    this.getPhoneCategoryInfo();
  },
  activated() {},
  methods: {
    //获取卡位类型
    async getPhoneCategoryInfo() {
      const res = await getDicts("tel_sms_config");
      console.log("res", res);
      this.phonecategoryList = res.data;
    },
    async changeCarrier(e) {
      console.log("e", e);
      const res = await phoneApi.getGamePhoneInfo(e);
      this.gameTypePhoneList = res.rows;
    },
    onCloseMessage() {
      this.messageObj = {
        id: null,
        type: null,
        n: null,
        to: null,
      };
      this.dialogVisibleseMessage = false;
      this.messageList = [];
    },
    onClosehistory() {
      this.telHistory = {
        telId: null,
      };
      this.dialogVisibleseMessage1 = false;
      this.telManageHistoryList = [];
    },
    async changeTypeDetail(e) {
      if (e == 1) {
        this.messageObj.n = this.messageData.tel;
        this.messageObj.to = null;
      } else {
        this.messageObj.to = this.messageData.tel;
        this.messageObj.n = null;
      }
      const res = await phoneApi.messageDetailinfo(this.messageObj);
      console.log("res", res);
      this.messageList = res.rows;
    },

    //操作记录
    async telhistory(item) {
      console.log("item", item);
      this.telHistory.telId = item.id;
      this.dialogVisibleseMessage1 = true;

      const res = await listHistory(this.telHistory);
      console.log("res", res);
      this.telManageHistoryList = res.rows;
    },

    //短信日志
    SMSLog(item) {
      console.log("item", item);
      this.messageObj.id = item.id;
      this.dialogVisibleseMessage = true;
      this.messageData = item;
    },
    changeUseType(e) {
      const arr = this.AccountList.filter((item) => item.id == e);
      if (arr && arr.length != 0) {
        this.ObjType = arr[0];
      }
    },
    async getaccountType() {
      let obj = {
        pageSize: 100,
        pageNum: 1,
      };
      const res = await listTeluseConfig(obj);
      console.log("res", res);
      this.AccountList = res.rows;
    },
    onClose() {
      this.dialogVisiblesePhone = false;
      this.formData = {
        n: null,
        to: null,
        txt: "",
      };
    },
    handelConfirm() {
      this.$refs["elForm"].validate(async (valid) => {
        if (!valid) return;
        const res = await phoneApi.fssongPhoneMessage(this.formData);
        console.log("res", res);
        this.dialogVisiblesePhone = false;
        this.$message.success("操作成功！");
        this.onClose();
      });
    },
    async fasong(item) {
      this.messagePhone = item;
      this.formData.n = item.tel;
      this.formData.category = item.category;
      this.dialogVisiblesePhone = true;
      const res = await phoneApi.getGameTypeList();
      this.gameTypeList = res.rows;
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then((response) => {
        this.deptOptions = response.data;
      });
    },
    //查看绑定信息
    ViewBindingInformation(data) {
      console.log("data", data);
      if (data) {
        this.dialogVisiblecheckdata = true;
        this.checkListAll = data.dataList;
      } else {
        return this.$message.error("暂无绑定信息");
      }
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "导入";
      this.upload.open = true;
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
      this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    getTypeList() {
      getDicts("tel_department").then((res) => {
        if (res.code == 200) {
          console.log(res);
          this.typeListArr = res.data;
        }
      });
    },
    // 游戏列表
    getGameList() {
      gameListApi.getGameList().then((res) => {
        this.gameList = res.rows;
      });
    },
    updateTel() {
      if (!this.formData.useType) {
        return this.$message.error("请选择使用类型");
      }
      if (this.ObjType.isUseImg == 1 && !this.useImg) {
        return this.$message.error("请上传截图");
      }
      this.formData.id = this.telId;
      // this.formData.isUse = 1;
      this.formData.useImg = this.useImg;
      phoneApi.userStatus(this.formData).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.$modal.msgSuccess("操作成功");
          this.getList();
          this.handleClose();
        }
      });
    },
    // selectType() {
    //   if (this.formData.useType == 1) {
    //     this.showQQ = true;
    //     this.showJietu = false;
    //   }
    //   if (this.formData.useType == 2) {
    //     this.showQQ = false;
    //     this.showJietu = true;
    //   }
    // },
    handleAvatarSuccess(res, file) {
      console.log(res);
      this.useImg = res.data.filePath;
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 4;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 4MB!");
      }
      // return isJPG && isLt2M;
    },

    handleClose() {
      this.dialogVisible = false;
      this.useImg = null;
      this.ObjType = {};
    },
    isUse(row) {
      this.formData = {};
      this.telId = row.id;
      console.log(this.telId);
      this.dialogVisible = true;
    },
    // 导出列表
    handleExport() {
      this.exportLoading = true;
      phoneApi.daochuPhone(this.queryParams).then((res) => {
        if (res.code == 200) {
          this.$download.name(res.msg);
          this.$message.success("操作成功");
          this.exportLoading = false;
        }
      });
    },
    // 导出列表
    handleExportNew() {
      this.exportLoading = true;
      phoneApi.daochu().then((res) => {
        if (res.code == 200) {
          this.$download.name(res.msg);
          this.$message.success("操作成功");
          this.exportLoading = false;
        }
      });
    },
    //转未使用
    zhuanweishiyong(item) {
      this.$confirm("此操作将该手机卡状态改为未使用状态,是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let obj = {
            id: item.id,
            wyStatus: 1,
          };
          const res = await phoneApi.editListPhone(obj);
          console.log(res);
          this.getList();
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
    // 获取列表
    getList() {
      this.loading = true;
      if (this.saleTimeArr.length > 1) {
        var startDate = moment(this.saleTimeArr[0]).format("YYYY-MM-DD");
        this.queryParams.startTime = startDate + " 00:00:00";
        var endDate = moment(this.saleTimeArr[1]).format("YYYY-MM-DD");
        this.queryParams.endTime = endDate + " 23:59:59";
      }
      // this.queryParams.type = this.actived;
      // this.queryParams.isUse = 0;
      phoneApi.getList(this.queryParams).then((response) => {
        this.tableData.records = response.rows;
        this.tableData.total = response.total;
        this.loading = false;
        if (response.rows && response.rows.length) {
          this.rise = response.rows[0].rise;
        }
      });
    },

    // tabs切换时触发
    // tabChange() {
    //   this.queryParams.type = this.actived;
    //   this.getList();
    //   // this.getAreas();
    // },
    getOnes(list, i) {
      console.log(list, i);
      this.listOne = list;
      this.nameyouxi = i;
    },
    //系列弹层
    tanchuangceng(row, i) {
      console.log(111);
      if (row.length == 0) {
        this.dialogVisiblese = false;
        this.$message({
          message: "暂无系列！",
          type: "warning",
        });
        return;
      }
      this.dialogVisiblese = true;
      console.log(row);
      this.xilie = row;
      this.names = i;
      this.listOne = row[0].list;
      this.nameyouxi = row[0].name;
    },

    // 搜索
    search() {
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.getList();
    },
    // 状态改变
    statusChange(e, row) {
      phoneApi.editPhone(row).then((res) => {
        console.log("%c Line:194 🌰 res", "color:#3f7cff", res);
        this.$message.success("操作成功！");
        this.getList();
      });
    },
    // 打开新增弹窗
    openAdd() {
      this.$refs.addDialog.open();
    },
    // 打开编辑弹窗
    editRow(row) {
      this.$refs.addDialog.open("edit", row);
    },
    // 复制商品信息
    keyCopy(item) {
      var hoste = this.hoste.replace("xh.", "");
      hoste = hoste.replace("www.", "");
      hoste = hoste.replace("//", "//rt.");
      hoste = hoste.replace("/show.html?ZHID=", "");
      hoste = hoste + "/show.html?id=" + this.user.userId;

      let hostt = hoste + "&ZHID=" + item.id;
      this.copyVlaue =
        "商品ID：" +
        item.id +
        "\n" +
        "自编号：" +
        item.gameName +
        "\n" +
        "大区：" +
        item.regional +
        "\n" +
        "段位：" +
        item.level +
        "\n" +
        "英雄：" +
        item.heroes +
        "\n" +
        "皮肤：" +
        item.skins +
        "\n" +
        "售价：" +
        item.newPrice +
        "\n" +
        "简介：" +
        item.des +
        "\n" +
        "商品截图：" +
        hostt;
    },
    // 复制成功和失败的方法
    onCopy(e) {
      this.$modal.msgSuccess("复制成功");
      this.copyVlaue = "";
    },
    onError() {
      this.$modal.msgError("复制失败");
      this.copyVlaue = "";
    },
    //重置
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        wyStatus: null,
        gameType: null,
        startTime: null,
        endTime: null,
        createName: null,
        deptId: undefined,
      };
      this.saleTimeArr = [];
      this.getList();
    },

    // 提号
    openPickUp(row) {
      this.$refs.pickDialog.open(row);
    },
    // 双击行查看详情图片
    showImage(row) {
      // var hoste = this.hoste.replace("xh.", "");
      // hoste = hoste.replace("www.", "");
      // hoste = hoste.replace("//", "//rt.");
      // hoste = hoste.replace("/show.html?ZHID=", "");
      // hoste = hoste + "/show.html?id=" + this.user.userId;
      // let hostt = hoste + "&ZHID=" + row.id;
      // this.$refs.h5Dialog.open(hostt);
    },
    // 每页条数改变
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList();
    },
    // 页码改变
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },
    //删除
    delfn(item) {
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await phoneApi.delPhone(item.id);
          console.log(res);
          this.getList();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.ones {
  width: 166px;
  height: 42px;
  text-align: center;
  line-height: 42px;
  border: 1px solid #ccc;
}

.two {
  text-align: center;
  width: 300px;
}

.twos {
  width: 100%;
  padding: 11.7px 20px;
  border: 1px solid #ccc;
}
.zdy-des {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin: 6px 0;
}
.search-form-new ::v-deep .el-input {
  width: 200px !important;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
